function main() {
    const clockText = '个';
    var innerLeftHtmlStr = ''
    var innerRightHtmlStr = ''
    for (var i = 0; i < 7; i++) {
        innerLeftHtmlStr += `<div class="time-container seconds">     
    <div class="digit">
      <div class="fade">&nbsp;</div>
      <span class="num top num-ones-top" id="">0</span>
      <span class="num bottom num-ones-bottom" id="">
        <div class="bottom-container">0</div></span>
        <div class="swapper">
          <div id="" class="top-num-ones-anim num-anim top-anim" style="display:none;">
            <div class="top-half-num">0</div>
          </div>
          <div id="" class="bottom-num-ones-anim num-anim bottom-anim" style="display:none;">
            <div class="bottom-half-num">
              <div class="dropper">0</div></div>
          </div>
      </div>
      <div class="ring ring-left"></div>
      <div class="ring ring-right"></div>
    </div>
  </div>`
    }

    for (var i = 0; i <= 3; i++) {
        if (i == 2) {
            innerRightHtmlStr += '<div class="b" style="color:#0068b7;">.</div>'
        } else {
            innerRightHtmlStr += `<div class="time-container seconds">     
        <div class="digit">
          <div class="fade">&nbsp;</div>
          <span class="num top num-ones-top" id="">0</span>
          <span class="num bottom num-ones-bottom" id="">
            <div class="bottom-container">0</div></span>
            <div class="swapper">
              <div id="" class="top-num-ones-anim num-anim top-anim" style="display:none;">
                <div class="top-half-num">0</div>
              </div>
              <div id="" class="bottom-num-ones-anim num-anim bottom-anim" style="display:none;">
                <div class="bottom-half-num">
                  <div class="dropper">0</div></div>
              </div>
          </div>
          <div class="ring ring-left"></div>
          <div class="ring ring-right"></div>
        </div>
      </div>`
        }
    }

    innerLeftHtmlStr += `<div style="color:#0068b7;">${clockText}</div>`
    innerRightHtmlStr += '<div class="b" style="color:#0068b7;">%</div>'
    $('.innerLeft').html(innerLeftHtmlStr)
    $('.innerRight').html(innerRightHtmlStr)
}

let num = 0

function updateTime(address,district,town) {
    //网格员人数
    $.ajax({
        type: "get",
        url: basePath+'/service/sjwgy/reportadmin/getWGYCount?city=' + address + '&district='+district+'&town='+town,
        async: true,
        dataType: "json",
        success: function (map) {
            $("#1_num1").text(map.data.count2);
            $("#1_num3").text(map.data.count3);
            setTimes(fixNum(map.data.count, 7), 0)
        }
    });
}

function fixNum(val, max) {
    let valStr = val.toString()
    var retVal = ''
    if (valStr.length == max) {
        retVal = valStr
    }
    if (valStr.length < max) {
        let addZero = ''
        for (var i = 0; i < max - valStr.length; i++) {
            addZero += '0'
        }
        retVal = addZero + valStr
    }
    if (valStr.length > max) {
        retVal = valStr.substring(0, max)
    }
    return retVal
}

function setTimes(timeStr, timeStr2) {
    var LefttopAry = $('.centerLeftRoll .num-ones-top')
    var rightTopAry = $('.centerRightRoll .num-ones-top')
    for (var i = 0; i < LefttopAry.length; i++) {
        setTime('.innerLeft ', $(LefttopAry[i]).text(), timeStr[i], i);
    }
    for (var i = 0; i < rightTopAry.length; i++) {
        setTime('.innerRight ', $(rightTopAry[i]).text(), timeStr2[i], i);
    }
}

function setTime(type, previousTime, newTime, sub) {
    if (previousTime === newTime || previousTime == undefined || newTime == undefined) {
        return;
    }
    setTimeout(function () {
        $($(type + '.num-ones-top')[sub]).text(newTime)
    }, 150);
    setTimeout(function () {
        $('.bottom-container', $($(type + '.num-ones-bottom')[sub])).text(newTime)
    }, 365);
    animateTime(type, previousTime, newTime, sub);
}

function animateTime(type, previousTime, newTime, sub) {
    var top, bottom;
    top = $($(type + '.top-num-ones-anim')[sub])
    bottom = $($(type + '.bottom-num-ones-anim')[sub])

    $(type + '.top-half-num', top).text(previousTime);
    $(type + '.dropper', bottom).text(newTime);
    top.show();
    bottom.show();
    $($(type + '.top-num-ones-anim')[sub]).css('visibility', 'visible');
    $($(type + '.bottom-num-ones-anim')[sub]).css('visibility', 'visible');
    animateNumSwap(type, sub);
    setTimeout(function () {
        hideNumSwap(type, sub);
    }, 365);
}

function animateNumSwap(type, sub) {
    $($(type + '.top-num-ones-anim')[sub]).toggleClass('up');
    $($(type + '.bottom-num-ones-anim')[sub]).toggleClass('down');
}

function hideNumSwap(type, sub) {
    $($(type + '.top-num-ones-anim')[sub]).toggleClass('up');
    $($(type + '.bottom-num-ones-anim')[sub]).toggleClass('down');
    $($(type + '.top-num-ones-anim')[sub]).css('visibility', 'hidden');
    $($(type + '.bottom-num-ones-anim')[sub]).css('visibility', 'hidden');
}

$(document).ready(main);


window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        }
})();